import React, { useEffect, useState } from 'react';
import { Button,Checkbox,Modal,Form,Input  } from "antd";
import '../../styles/chen/systemrole.scss'
import * as service from '../../api/chen/index'
import { useNavigate } from 'react-router-dom';
const { TextArea } = Input;
interface Props{

}
function SystemRole(props: Props) {
    var navigate=useNavigate()
    const [data, setData] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
 
    useEffect(() => {
        service.role_list().then(res => {
            console.log(res.data)
            setData(res.data)
        })
    }, [])
    const showModal = () => {
        setIsModalOpen(true);
      };
    
    const handleOk = () => {
        service.role_add({name:"护士"}).then(res => {
            console.log(res)
        })

        setIsModalOpen(false);
        setTimeout(() => {
            navigate(0)
        }, 1000)
        
      };
    
      const handleCancel = () => {
          setIsModalOpen(false);
          
      };
    const onFinish = (values: any) => {
        console.log('Success:', values);
       
      };
      
      const onFinishFailed = (errorInfo: any) => {
        console.log('Failed:', errorInfo);
      };
    return (
        <div className='system-role'>
            
            <div className='role-header'>
                <h4>角色管理</h4>
                <Button type="primary">保存</Button>
            </div>
            <div className="role-box">
                <div className='rolebox-left'>
                    角色  <span onClick={showModal}>+新增角色</span>
                    <ul>
                        {
                            data.map((item:any,index) => {
                                return (
                                     <li key={index}>
                          {item.name}
                        </li>
                                )
                            })
                        }
                        
                    </ul>
                </div>
                <div className='rolebox-right'>
                   <p>管理角色权限</p> 
                    <Checkbox className='allcheck'>全部</Checkbox>
                    <div className='list-box'>
                         <Checkbox className='ipt-box'>签约管理</Checkbox>
                        <ul>
                            <li>
                            <Checkbox>查看待处理签约</Checkbox>
                        </li>
                            <li>
                            <Checkbox>编辑待处理签约</Checkbox>
                        </li>
                            <li>
                            <Checkbox>删除待处理签约</Checkbox>
                        </li>
                            <li>
                          <Checkbox>导出待处理签约</Checkbox>
                        </li>
                    </ul>
                    </div>
                  
                </div>
            </div>
            <Modal title="编辑角色信息" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
            <Form
    name="basic"
    labelCol={{ span: 8 }}
    wrapperCol={{ span: 16 }}
    style={{ maxWidth: 600 }}
    initialValues={{ remember: true }}
    onFinish={onFinish}
    onFinishFailed={onFinishFailed}
    autoComplete="off"
  >
    <Form.Item
      label="角色名称"
      name="rolename"
      
    >
      <Input />
    
                    
                    
    <Form.Item
      label="角色介绍"
      name="roleIntroduce"
      
    >
      <TextArea />
                    </Form.Item>
                    </Form.Item>
   
    
      
   
      
                  
                </Form>
                创建时间  2021年09月24日 10:13 <br />
                创建人  王丽心
                </Modal>
        </div>
    );
}

export default SystemRole;